<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>社区服务中心</title>
    <link href="css/swiper.css" rel="stylesheet">
    <link href="css/container.css" rel="stylesheet">
    <link href="css/infoCard.css" rel="stylesheet">
    <link href="element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body>

<div id="app">
    <!--顶部-->
    <div class="bg-purple-light">
        <el-row>
            <el-col :span="7">
                <div class="grid-content"
                     style="align-items: center; display: flex;">
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 20px">
                        <el-breadcrumb-item v-if="userInfo != null">
                            <el-button type="text" style="font-size: large">购买物资</el-button>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-if="userInfo != null">
                            <el-button type="text" @click="openMessage" style="font-size: large">留言板</el-button>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-if="ismanager === 'ok'"><a href="management.html">
                            <el-button type="text" style="font-size: large">社区管理</el-button>
                        </a></el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content" style="align-items: center; display: flex;">
                    <span class="p" style="align-items: center; display: flex; color: #c3d54f;
                    font-size: 20px" v-if="userInfo == null">
                        欢 迎 来 到 春 田 花 花 服 务 中 心</span>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content" v-show="userInfo == null"
                     style="align-items: center; display: flex;">
                    <el-button type="primary" size="mini" icon="el-icon-user" @click="openLogin">登录
                    </el-button>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content"
                     style="align-items: center; display: flex;" v-show="userInfo == null" >
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline"
                               @click="openRegister">注册
                    </el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content" style="align-items: center;
                     display: flex" v-show="userInfo != null">
                    <el-dropdown>
                        <i class="el-icon-user-solid"  style="margin-left: 200px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><span @click="openInfo">查看个人信息</span></el-dropdown-item>
                            <el-dropdown-item><span @click="showReply">查看留言回复</span></el-dropdown-item>
                            <el-dropdown-item><span @click="outUser">退出登录</span></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
        </el-row>
    </div>

    <!--轮播-->
    <div class="showImg" style="margin-bottom: 50px">
        <img @mouseover="changeInterval(true)"
             @mouseleave="changeInterval(false)"
             v-for="(item) in imgArr"
             :key="item.id"
             :src="item.url"
             alt="暂无图片"
             v-show="item.id===currentIndex"
        >
        <div @click="clickIcon('up')" class="iconDiv icon-left">
            <i class="el-icon-caret-left"></i>
        </div>
        <div @click="clickIcon('down')" class="iconDiv icon-right">
            <i class="el-icon-caret-right"></i>
        </div>
        <div class="banner-circle">
            <ul>
                <li @click="changeImg(item.id)"
                    v-for="(item) in imgArr"
                    :key="item.id"
                    :class="item.id===currentIndex? 'active': '' "
                ></li>
            </ul>
        </div>
    </div>

    <el-divider>
        <span style="text-align: center; font-size: 30px;">
            公告栏
        </span>
    </el-divider>
    <div style="margin-bottom: 60px"></div>


    <!--社区公告-->
    <div style="margin-bottom: 20px">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 24px">社区公告</span>
            </div>
            <div v-for="o in communityAnnouncement" :key="o.id"
                 class="text item" style="text-align: center; margin-bottom: 40px">
                <el-divider>
                    <el-button type="text" style="font-size: larger" @click="showAnnounce(o.id)">
                        {{ o.titleName }}</el-button>
                </el-divider>
            </div>
        </el-card>
    </div>

    <!--登录表单-->
    <el-dialog
            title="登录"
            :visible.sync="loginDialog"
            width="30%"
            :before-close="resetLogin">

        <el-form ref="form" :model="loginForm" label-width="100px">
            <el-form-item label="手机号">
                <el-input v-model="loginForm.phone"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="管理员">
                <el-switch v-model="loginForm.isSuperior"></el-switch>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetLogin">取 消</el-button>
            <el-button type="primary" @click="loginUser">提交</el-button>
        </span>
    </el-dialog>

    <!--注册表单-->
    <el-dialog
            title="注册"
            :visible.sync="registerDialog"
            width="30%"
            :before-close="resetRegister">
        <el-form ref="form" :model="registerForm" label-width="100px">
            <el-form-item label="手机号">
                <el-input v-model="registerForm.phone"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="验证码">
                <el-input v-model="registerForm.code" style="width: 80px"></el-input>
                <el-image id="checkCodeImg" src="http://localhost:8083/checkCode" @click="sendCode">
                </el-image>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetRegister">取 消</el-button>
            <el-button type="primary" @click="registerUser">提交</el-button>
        </span>
    </el-dialog>

    <!--留言板表单-->
    <el-dialog
            title="留言"
            :visible.sync="messageDialog"
            width="40%"
            :before-close="resetMessage">
        <el-form ref="form" :model="messageData" label-width="100px">
            <el-form-item label="留言内容">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入留言内容"
                        v-model="messageData.content">
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetMessage">取 消</el-button>
            <el-button type="primary" @click="sendMessage">发 送</el-button>
        </span>
    </el-dialog>

    <!--个人信息表单-->
    <el-dialog
            title="个人信息"
            :visible.sync="infoDialog"
            width="40%">
        <el-form label-width="130px" :model="formInfo">
            <el-form-item label="用户id:">
                {{formInfo.id}}
            </el-form-item>
            <el-form-item label="用户名称:">
                {{formInfo.nickName}}
            </el-form-item>
            <el-form-item label="联系电话:">
                {{formInfo.phone}}
            </el-form-item>
            <el-form-item label="个人简介:">
                {{formInfo.description}}
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="infoDialog = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!--留言回复表单-->
    <el-dialog
            title="留言回复"
            :visible.sync="replyDialog"
            width="60%">
        <el-table :data="replyData">
            <el-table-column prop="senderId" label="管理员号" width="120">
            </el-table-column>
            <el-table-column prop="content" label="内容" width="280">
            </el-table-column>
            <el-table-column prop="createTime" label="回复时间" width="180">
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="replyDialog = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!--公告-->
    <el-dialog
            title="公告板"
            :visible.sync="announcementDialog"
            width="40%">
        <el-form label-width="130px" :model="announcementData">
            <el-form-item label="标题名字:">
                {{announcementData.titleName}}
            </el-form-item><el-form-item label="公告内容:">
            {{announcementData.content}}
        </el-form-item>
            <el-form-item label="发布时间:">
                {{announcementData.createTime}}
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="announcementDialog = false">关 闭</el-button>
        </span>
    </el-dialog>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    let token = localStorage.getItem("token")
    axios.interceptors.request.use(
        config => {
            if (token) config.headers['authorization'] = token
            return config
        },
        error => {
            console.log(error)
            return Promise.reject(error)
        }
    )
    new Vue({
        el: '#app',
        data() {
            const item = {
                senderId: 2,
                content: "马上就好",
                createTime: "2022-11-26 13:32:15"
            };
            const item1 = {
                id: 1,
                titleName:"喜迎二十大",
            };
            return {
                currentIndex: 0,//当前所在图片下标
                timer: null,//定时轮询
                imgArr: [
                    {
                        id: 0,
                        url: "img/1.jpg"
                    }, {
                        id: 1,
                        url: "img/2.jpg",
                    }, {
                        id: 2,
                        url: "img/3.jpg",
                    }, {
                        id: 3,
                        // url: "../img/4.jpg",
                        url: "img/4.jpg",
                    },
                ],
                ismanager: "",
                loginDialog: false,
                registerDialog: false,
                messageDialog: false,
                communityAnnouncement: Array(5).fill(item1),/*社区公告*/
                loginForm: {
                    phone: "",
                    password: "",
                    isSuperior: "false"
                },/*登录表单*/
                registerForm: {
                    phone: "",
                    password: "",
                    code:""
                },/*注册表单*/
                userInfo: {},
                outlogin: "",
                messageData:{
                    senderId: 1,
                    content: "",
                },
                formInfo: {
                    id: "神马也莫有",
                    phone: "神马也莫有",
                    nickName: "神马也莫有",
                    description: "神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有" +
                        "神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有神马也莫有"
                },
                infoDialog: false,
                replyDialog: false,
                replyData: Array(10).fill(item),
                announcementDialog: false,
                announcementData:{
                    id: "1",
                    titleName: "喜迎党的二十大",
                    content: "2022年是党的二十大召开之年，也是踏上全面建设社会主义现代化国家、向第二个百年奋斗目标进军新征程的开局之年。而如今，我们正处于百年未有之大变局，这既给我们带来了新的机遇，同样也带来了新的挑战。作为新时代青年，我们必将“以志为先，以新为径，以苦为食”，以青春之名，喜迎党的二十大，在新时代不懈奋斗，建功立业。",
                    senderId: "2",
                    createTime: "2022-11-26 15:04:39"
                }
            }
        },
        created(){
            this.getUserInfo()
            this.ismanager = sessionStorage.getItem("ismanager")
            this.userInfo = sessionStorage.getItem("userInfo")
            this.outlogin = localStorage.getItem("outlogin")
        },
        methods: {
            //开启定时器
            startInterval() {
                // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.currentIndex++;
                    if (this.currentIndex > this.imgArr.length - 1) {
                        this.currentIndex = 0
                    }
                }, 3000)
            },
            // 点击左右箭头
            clickIcon(val) {
                if (val === 'down') {
                    this.currentIndex++;
                    if (this.currentIndex === this.imgArr.length) {
                        this.currentIndex = 0;
                    }
                } else {
                    /* 第一种写法
                    this.currentIndex--;
                    if(this.currentIndex < 0){
                        this.currentIndex = this.imgArr.length-1;
                    } */
                    // 第二种写法
                    if (this.currentIndex === 0) {
                        this.currentIndex = this.imgArr.length;
                    }
                    this.currentIndex--;
                }
            },
            // 点击控制圆点
            changeImg(index) {
                this.currentIndex = index
            },
            //鼠标移入移出控制
            changeInterval(val) {
                if (val) {
                    clearInterval(this.timer)
                } else {
                    this.startInterval()
                }
            },

            /*登录注册*/
            openLogin(){
                this.loginDialog = true
            },
            openRegister(){
                this.registerDialog = true
            },
            openMessage(){
                this.messageDialog = true
            },
            getUserInfo(){
                let token = localStorage.getItem("token")
                axios.get("/user/" + token)
                    .then((res) => {
                        if (res.data.success !== true){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            sessionStorage.setItem("userInfo", res.data.data)
                        }
                    });
            },
            loginUser(){
                let _this = this
                axios.post("/req/login", this.loginForm)
                    .then((res) => {
                        if (res.data.success !== true){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            if (_this.loginForm.isSuperior){
                                sessionStorage.setItem("ismanager", "ok")
                            }else {
                                _this.ismanager = null
                                sessionStorage.setItem("ismanager", null)
                            }
                            let token = res.data.data
                            localStorage.setItem("token", token)
                            localStorage.setItem("outlogin","")
                            _this.loginDialog = false
                            location.reload()
                        }
                    })
            },
            registerUser(){
                let _this = this
                axios.post("/req/register",this.registerForm)
                    .then((res) => {
                        if (res.data.success === false){
                            //注册失败，则返回失败信息并且清空原来的数据
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            localStorage.setItem("token",res.data.data)
                            localStorage.setItem("outlogin", "")
                            _this.registerDialog = false
                            location.reload()
                        }
                    });
            },
            resetLogin(){
                /*点击取消，重置登录表单*/
                this.loginDialog = false
                this.loginForm.phone = ""
                this.loginForm.password = ""
                this.loginForm.isSuperior = false
            },
            resetRegister(){
                this.registerDialog = false
                this.registerForm.phone = ""
                this.registerForm.password = ""
                this.registerForm.code = ""
            },
            resetMessage(){
                this.messageDialog = false
                this.messageData.content = ""
                this.messageData.senderId = ""
            },
            sendCode(){
                //验证码请求资源的路径时时在变
                document.getElementById("checkCodeImg").src = "http://localhost:8083/checkCode?" + new Date().getMilliseconds();
            },
            outLogin(){
                if (this.outlogin === "true"){
                    this.ismanager = null
                    this.userInfo = null
                    sessionStorage.setItem("ismanager",null)
                    sessionStorage.setItem("userInfo",null)
                }
            },
            sendMessage(){
                _this = this
                axios.post("/message/save", this.messageData)
                    .then((res) => {
                        if (res.data.success === false){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            location.reload()
                            _this.messageDialog = false
                        }
                    });
            },
            openInfo(){
                this.infoDialog = true
                _this = this
                axios.post("/user/sendInfo")
                    .then((res) => {
                        _this.formInfo = res.data.data
                    })
            },
            outUser(){
                if (localStorage.getItem("outlogin") !== "true"){
                    localStorage.setItem("outlogin","true")
                }
                let token = localStorage.getItem("token")
                /*发出请求，将session中的用户信息删除*/
                axios.delete("/user/" + token)
                    .then((res) => {
                        if (res.data.success !== true){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            location.reload()
                        }
                    })
            },
            showReply(){
                this.replyDialog = true
                _this = this
                axios.get("/reply")
                    .then((res) => {
                        if (res.data.success === false){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            _this.replyData = res.data.data
                        }
                    });
            },
            showAnnounce(id){
                /*根据id查询对应的公告内容*/
                this.announcementDialog = true
                _this = this
                axios.get("/announcement/" + id)
                    .then((res) => {
                        if (res.data.success !== true){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            _this.announcementData = res.data.data
                        }
                    });
            },
            getAllAnnounce(){
                _this = this
                axios.get("/announcement/part")
                    .then((res) => {
                        if (res.data.success !== true){
                            this.$message({
                                message: res.data.errorMsg,
                                type: 'warning'
                            })
                        }else {
                            _this.communityAnnouncement = res.data.data
                        }
                    });
            },
        },
        //进入页面后启动定时轮询
        mounted() {
            this.startInterval()
            this.outLogin()
            this.getAllAnnounce()
        },
    })

</script>

</body>

</html>
